<template>
    <nav id="header-box">
        <e-container>
            <router-link to="/index" class="logo"> {{ config.title }} </router-link>

            <!-- ==========  Top navigation ========== -->

            <div class="navigation navigation-top clearfix">
                <ul>
                    <!--add active class for current page-->
                    <li class="left-side">
                        <router-link to="/index"> {{ config.title }} </router-link>
                    </li>
                    <!--<li class="left-side"><a href="email-template.html">Email template</a></li>-->

                    <template v-if="$session.username">
                        <e-chat-button v-if="$session.cx == '用户'" >消息</e-chat-button>

                        <li>
                            <router-link to="/admin/sy"><i class="icon icon-user"></i>{{ $session.username }},{{ $session.cx }}</router-link>
                        </li>


                        <li>
                            <a href="javascript:;" @click="logout"><i class="fa fa-sign-out"></i>退出</a>
                        </li>
                    </template>
                    <template v-else>
                        <li>
                            <router-link to="/login" class="open-login"><i class="icon icon-user"></i> 登录</router-link>
                        </li>
                    </template>

                    <li>
                        <a href="javascript:void(0);" class="open-search" @click="isSearch=true"><i class="icon icon-magnifier"></i></a>
                    </li>

                    <!--<li><a href="javascript:void(0);" class="open-cart"><i class="icon icon-cart"></i> <span>4</span></a></li>-->
                </ul>
            </div>

            <!-- ==========  Main navigation ========== -->

            <div class="navigation navigation-main">
                <a href="#" class="open-login"><i class="icon icon-user"></i></a>
                <!--<a href="#" class="open-search"><i class="icon icon-magnifier"></i></a>
                <a href="#" class="open-cart"><i class="icon icon-cart"></i> <span>4</span></a>-->
                <a href="#" class="open-menu"><i class="icon icon-menu"></i></a>

                <div class="floating-menu">
                    <!--mobile toggle menu trigger-->
                    <div class="close-menu-wrapper">
                        <span class="close-menu"><i class="icon icon-cross"></i></span>
                    </div>
                    <ul id="navbar-str">
                        <li :class="{active:isFullPathActive('/index')}">
                            <router-link :to="'/index'">首页 </router-link>
                        </li>
                        <li :class="{active:isFullPathActive({path:'/shangpinxinxi'})}">
                            <router-link :to="{path:'/shangpinxinxi'}">商品信息 </router-link>
                        </li>
                        <li :class="{active:isFullPathActive({path:'/liuyanban/add'})}">
                            <router-link :to="{path:'/liuyanban/add'}">留言板 </router-link>
                        </li>
                        <li :class="{active:isFullPathActive({path:'/yonghu/add'})}">
                            <router-link :to="{path:'/yonghu/add'}">用户注册 </router-link>
                        </li>



                    </ul>
                </div>
            </div>

            <!-- ==========  Search wrapper ========== -->

            <div class="search-wrapper" :class="{'open':isSearch}">
                <form action="javascript:;">
                    <el-input type="text" v-model="keyword" class="form-control" placeholder="输入搜索关键字" />
                    <el-button size="small" type="default" @click="searchKeyword">搜索</el-button>
                </form>
            </div>
        </e-container>
    </nav>
</template>

<script setup>
    import { useRouter, useRoute } from "vue-router";
    import { computed, ref, reactive, watch } from "vue";
    import { logout } from "@/utils/utils";
    import { isObject } from "@/utils/extend";
    import DB from "@/utils/db";
    import config from "@/config";
    import { isFullPathActive, isPathActive } from "@/router/router-utils";
    import { Search } from "@element-plus/icons-vue";
    const router = useRouter();

    const isSearch = ref(false);

    const keyword = ref("");
    const searchKeyword = () => {
        var filter = {};
        filter["shangpinmingcheng"] = keyword.value;
        router.push({
            path: "/shangpinxinxi",
            query: filter,
        });
    };
    const loadListMenu = async (module, target) => {
        target.value = await DB.name(module).order("id desc").select();
    };

    const route = useRoute();
</script>

<style lang="scss">
    $theme1: rgba(38, 110, 186, 1);
    $theme2: #336699;
    .navigation-container {
    }

    nav.navbar-fixed {
        position: fixed;
        left: 0;
        top: 0;
        background-color: transparent;
    }

    nav.navbar-default {
        position: relative;
        background-color: transparent;
    }

    nav.navbar-sticked .navigation-top > ul {
        height: 0;
        border: 0;
    }

    nav.navbar-sticked .navigation-main {
        -moz-box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
        box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
    }

    nav .container,
    nav .navigation {
        position: relative;
    }

    nav .logo {
        position: absolute;
        display: inline-block;
        overflow: hidden;
        left: 10px;
        top: 0;
        border: 0;
        z-index: 10;
    }

    nav .logo img {
        height: 55px;
    }

    @media (min-width: 992px) {
        nav .logo {
            display: none;
        }
    }
    nav .navigation ul,
    nav .navigation ul li {
        margin: 0;
        padding: 0;
    }

    nav .navigation ul li {
        list-style-type: none;
    }

    nav .navigation > ul > li,
    nav .navigation > ul > li > a {
        display: inline-block;
    }

    nav .navigation > ul > li > a {
        padding: 14px 20px;
    }

    nav .navigation > ul > li.active a,
    nav .navigation > ul > li.active a:hover {
        color: #7b7b7b;
    }

    nav .navigation-pre {
        display: none;
        background-color: #3c5570;
        color: white;
        text-align: center;
        font-size: 11px;
    }

    nav .navigation-pre .row {
        margin: 0;
    }

    nav .navigation-pre .row > div {
        padding: 0;
    }

    nav .navigation-pre a {
        color: white;
        padding: 10px;
        display: block;
    }

    nav .navigation-pre a:hover {
        background-color: $theme1;
    }

    @media (min-width: 992px) {
        nav .navigation-pre {
            display: block;
        }
    }
    nav .navigation-top {
        display: none;
        border-bottom: 1px solid #e0e0e0;
    }

    nav .navigation-top > ul {
        text-align: right;
        height: 55px;
        overflow: hidden;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    nav .navigation-top > ul .left-side {
        float: left;
    }

    nav .navigation-top > ul .left-side.active a {
        background-color: #e0e0e0;
    }

    nav .navigation-top > ul .left-side > a {
        border-left: 0;
        border-right: 1px solid #e0e0e0;
        font-size: 16px;
    }

    nav .navigation-top > ul .left-side .logo-icon {
        padding: 10px 10px 0 0;
        line-height: normal;
    }

    nav .navigation-top > ul .left-side .logo-icon img {
        vertical-align: baseline;
    }

    nav .navigation-top > ul > li > a {
        font-family: "Poppins", sans-serif;
        text-transform: uppercase;
        border-left: 1px solid #e0e0e0;
        padding: 0 20px;
        line-height: 55px;
        font-size: 16px;
    }

    nav .navigation-top .open-login {
        margin-left: 10px;
    }

    nav .navigation-main .open-cart,
    nav .navigation-main .open-login,
    nav .navigation-main .open-search,
    nav .navigation-main .open-menu,
    nav .navigation-main .close-menu-wrapper {
        display: none;
    }

    nav .navigation-main .open-dropdown {
        margin-left: 5px;
    }

    nav .navigation-main .floating-menu {
        background-color: white;
    }

    nav .navigation-main .floating-menu > ul > li > a {
        position: relative;
        font-family: "Open Sans", sans-serif;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        -moz-transition: none;
        -o-transition: none;
        -webkit-transition: none;
        transition: none;
    }

    nav .navigation-main .navbar-dropdown .navbar-box .row > div {
        margin-bottom: 15px;
        margin-bottom: 0;
    }

    nav .navigation-main .navbar-dropdown .navbar-box ul {
        margin-bottom: 60px;
    }

    nav .navigation-main .navbar-dropdown .navbar-box ul > li {
        padding: 0;
        list-style-type: none;
        margin-bottom: 5px;
    }

    nav .navigation-main .navbar-dropdown .navbar-box ul > li.label {
        padding: 5px 0;
        font-size: 14px;
        display: inline-block;
        margin-bottom: 6px;
        font-weight: normal;
        color: #3c5570;
    }

    @media (min-width: 992px) {
        nav .navigation-main .navbar-dropdown .navbar-box ul > li.label {
            font-size: 18px;
            color: white;
            margin-bottom: 12px;
        }
    }
    nav .navigation-main .navbar-dropdown .navbar-box ul > li.more a {
        font-size: 10px;
        color: #8fc4ff;
        text-transform: uppercase;
    }

    nav .navigation-main .navbar-dropdown .navbar-box ul > li.more a .icon {
        font-size: 6px;
    }

    nav .navigation-main .navbar-dropdown .navbar-box ul > li > a {
        color: white;
        display: block;
        padding-bottom: 5px;
        border-bottom: 1px solid $theme2;
        font-size: 14px;
    }

    nav .navigation-main .navbar-dropdown .navbar-box ul > li > a span.label {
        padding: 2px 4px;
        vertical-align: super;
        font-size: 55%;
    }

    @media (min-width: 992px) {
        nav .navigation-main .navbar-dropdown .navbar-box ul > li > a:hover {
            -moz-transform: translateX(5px);
            -ms-transform: translateX(5px);
            -o-transform: translateX(5px);
            -webkit-transform: translateX(5px);
            transform: translateX(5px);
        }
    }
    nav .navigation-main .navbar-dropdown .navbar-box ul > li:last-child > a {
        border-bottom: 0;
    }

    @media (min-width: 992px) {
        nav .navigation .floating-menu > ul > li,
        nav .navigation .floating-menu > ul > li > a {
            display: inline-block;
        }

        nav .navigation .logo {
            position: absolute;
            z-index: 1;
        }

        nav .navigation-top {
            display: block;
        }

        nav .navigation-main {
            border-bottom: 1px solid #e0e0e0;
        }

        nav .navigation-main .floating-menu > ul {
            position: relative;
            border-bottom: 0px solid #CCC;
        }

        nav .navigation-main .floating-menu > ul > li > a {
            padding: 15px;
        }

        nav .navigation-main .floating-menu > ul > li.nav-settings {
            float: right;
        }

        nav .navigation-main .floating-menu > ul > li.nav-settings ul li {
            cursor: pointer;
        }

        nav .navigation-main .floating-menu > ul > li .navbar-dropdown {
            display: none;
            position: absolute;
            overflow: hidden;
            color: white;
            width: 100%;
            left: 0;
            right: 0;
            top: 100%;
            text-align: left;
            z-index: 9999;
        }

        nav .navigation-main .floating-menu > ul > li .navbar-dropdown .navbar-box {
            display: table;
            width: 100%;
        }

        nav .navigation-main .floating-menu > ul > li .navbar-dropdown .navbar-box .image img {
            width: 100%;
        }

        nav .navigation-main .floating-menu > ul > li .navbar-dropdown .navbar-box > div {
            display: table-cell;
            vertical-align: top;
            width: 50%;
        }

        nav .navigation-main .floating-menu > ul > li .navbar-dropdown .navbar-box .box-sm {
            width: 40%;
            background-color: #2a3c4f;
        }

        nav .navigation-main .floating-menu > ul > li .navbar-dropdown .navbar-box .box-lg {
            width: 60%;
            background-color: #3c5570;
        }

        nav .navigation-main .floating-menu > ul > li .navbar-dropdown .navbar-box .box-full {
            background-color: $theme1;
        }

        nav .navigation-main .floating-menu > ul > li .navbar-dropdown .navbar-box .box {
            padding: 40px;
        }

        nav .navigation-main .floating-menu > ul > li .navbar-dropdown .navbar-box ul {
            width: 100%;
        }

        nav .navigation-main .floating-menu > ul > li .navbar-dropdown.navbar-dropdown-single {
            width: auto;
            right: auto;
            left: auto;
            max-width: 250px;
        }

        nav .navigation-main .floating-menu > ul > li .navbar-dropdown.navbar-dropdown-single .navbar-box {
            min-height: inherit;
        }

        nav .navigation-main .floating-menu > ul > li .navbar-dropdown.navbar-dropdown-single .navbar-box .box {
            padding: 20px;
        }

        nav .navigation-main .floating-menu > ul > li .navbar-dropdown.navbar-dropdown-single .navbar-box ul:last-child {
            margin-bottom: 0;
        }

        nav .navigation-main .floating-menu > ul > li .navbar-dropdown .btn {
            margin-top: 20px;
        }

        nav .navigation-main .floating-menu > ul > li.active a:hover {
            /*color: #3c5570;*/
        }

        nav .navigation-main .floating-menu > ul > li.active {
            background-color: $theme1;
        }

        nav .navigation-main .floating-menu > ul > li:hover {
            background-color: $theme1;
        }

        nav .navigation-main .floating-menu > ul > li:hover a,
        nav .navigation-main .floating-menu > ul > li.active a {
            color: white;
        }

        nav .navigation-main .floating-menu > ul > li:hover .navbar-dropdown {
            display: block;
        }
    }
    @media (max-width: 991px) {
        nav {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        nav.navbar-fixed {
            position: absolute;
            background-color: black;
        }

        nav .container {
            padding: 0;
            margin: 0;
            width: 100%;
            max-width: none;
        }

        nav .navigation-main {
            height: 55px;
        }

        nav .navigation-main .open-cart,
        nav .navigation-main .open-login,
        nav .navigation-main .open-search,
        nav .navigation-main .open-menu,
        nav .navigation-main .close-menu-wrapper {
            display: block;
        }

        nav .navigation-main .open-cart,
        nav .navigation-main .open-login,
        nav .navigation-main .open-search,
        nav .navigation-main .open-menu {
            position: absolute;
            top: 0px;
            right: 0;
            width: 40px;
            height: 100%;
            text-align: center;
            border-left: 1px solid #dcdcdc;
        }

        nav .navigation-main .open-cart .icon,
        nav .navigation-main .open-login .icon,
        nav .navigation-main .open-search .icon,
        nav .navigation-main .open-menu .icon {
            font-size: 15px;
            line-height: 58px;
        }

        nav .navigation-main .open-login {
            right: 40px;
        }

        nav .navigation-main .open-cart {
            right: 80px;
        }

        nav .navigation-main .open-search {
            right: 120px;
        }

        nav .navigation-main .floating-menu {
            position: absolute;
            padding: 0 10px;
            z-index: 9999;
            width: 100%;
            top: 0;
            right: 0;
            left: auto;
            background-color: #3c5570;
            -moz-transform: translate3d(0, -100%, 0);
            -ms-transform: translate3d(0, -100%, 0);
            -o-transform: translate3d(0, -100%, 0);
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
            -moz-transition: all 0.3s;
            -o-transition: all 0.3s;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }

        nav .navigation-main .floating-menu.expanded,
        nav .navigation-main .floating-menu.expanded .close-menu {
            display: block;
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        nav .navigation-main .floating-menu.expanded > ul > li {
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            -moz-transition: all 0.2s;
            -o-transition: all 0.2s;
            -webkit-transition: all 0.2s;
            transition: all 0.2s;
        }

        nav .navigation-main .floating-menu .navbar-dropdown {
            display: none;
            background-color: #405a77;
            padding: 0 10px;
            margin-bottom: 10px;
        }

        nav .navigation-main .floating-menu > ul {
            overflow: hidden;
        }

        nav .navigation-main .floating-menu > ul > li {
            -moz-transform: translate3d(100%, 0, 0);
            -ms-transform: translate3d(100%, 0, 0);
            -o-transform: translate3d(100%, 0, 0);
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(1) {
            -moz-transition-delay: 0.1s;
            -o-transition-delay: 0.1s;
            -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s;
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(2) {
            -moz-transition-delay: 0.2s;
            -o-transition-delay: 0.2s;
            -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(3) {
            -moz-transition-delay: 0.3s;
            -o-transition-delay: 0.3s;
            -webkit-transition-delay: 0.3s;
            transition-delay: 0.3s;
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(4) {
            -moz-transition-delay: 0.4s;
            -o-transition-delay: 0.4s;
            -webkit-transition-delay: 0.4s;
            transition-delay: 0.4s;
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(5) {
            -moz-transition-delay: 0.5s;
            -o-transition-delay: 0.5s;
            -webkit-transition-delay: 0.5s;
            transition-delay: 0.5s;
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(6) {
            -moz-transition-delay: 0.6s;
            -o-transition-delay: 0.6s;
            -webkit-transition-delay: 0.6s;
            transition-delay: 0.6s;
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(7) {
            -moz-transition-delay: 0.7s;
            -o-transition-delay: 0.7s;
            -webkit-transition-delay: 0.7s;
            transition-delay: 0.7s;
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(8) {
            -moz-transition-delay: 0.8s;
            -o-transition-delay: 0.8s;
            -webkit-transition-delay: 0.8s;
            transition-delay: 0.8s;
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(9) {
            -moz-transition-delay: 0.9s;
            -o-transition-delay: 0.9s;
            -webkit-transition-delay: 0.9s;
            transition-delay: 0.9s;
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(10) {
            -moz-transition-delay: 1s;
            -o-transition-delay: 1s;
            -webkit-transition-delay: 1s;
            transition-delay: 1s;
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(11) {
            -moz-transition-delay: 1.1s;
            -o-transition-delay: 1.1s;
            -webkit-transition-delay: 1.1s;
            transition-delay: 1.1s;
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(12) {
            -moz-transition-delay: 1.2s;
            -o-transition-delay: 1.2s;
            -webkit-transition-delay: 1.2s;
            transition-delay: 1.2s;
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(13) {
            -moz-transition-delay: 1.3s;
            -o-transition-delay: 1.3s;
            -webkit-transition-delay: 1.3s;
            transition-delay: 1.3s;
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(14) {
            -moz-transition-delay: 1.4s;
            -o-transition-delay: 1.4s;
            -webkit-transition-delay: 1.4s;
            transition-delay: 1.4s;
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(15) {
            -moz-transition-delay: 1.5s;
            -o-transition-delay: 1.5s;
            -webkit-transition-delay: 1.5s;
            transition-delay: 1.5s;
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(16) {
            -moz-transition-delay: 1.6s;
            -o-transition-delay: 1.6s;
            -webkit-transition-delay: 1.6s;
            transition-delay: 1.6s;
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(17) {
            -moz-transition-delay: 1.7s;
            -o-transition-delay: 1.7s;
            -webkit-transition-delay: 1.7s;
            transition-delay: 1.7s;
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(18) {
            -moz-transition-delay: 1.8s;
            -o-transition-delay: 1.8s;
            -webkit-transition-delay: 1.8s;
            transition-delay: 1.8s;
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(19) {
            -moz-transition-delay: 1.9s;
            -o-transition-delay: 1.9s;
            -webkit-transition-delay: 1.9s;
            transition-delay: 1.9s;
        }

        nav .navigation-main .floating-menu > ul > li:nth-child(20) {
            -moz-transition-delay: 2s;
            -o-transition-delay: 2s;
            -webkit-transition-delay: 2s;
            transition-delay: 2s;
        }

        nav .navigation-main .floating-menu > ul > li > a {
            color: white;
            display: block;
            border-bottom: 1px solid #405a77;
            padding: 15px 0;
            position: relative;
        }

        nav .navigation-main .floating-menu > ul > li .open-dropdown {
            position: absolute;
            display: block;
            width: 40px;
            height: 100%;
            right: 0;
            top: 0;
            font-size: 22px;
            line-height: 50px;
            text-align: center;
        }

        nav .navigation-main .floating-menu > ul > li .open-dropdown .fa:before {
            -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
            -moz-transition: all 0.3s;
            -o-transition: all 0.3s;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
            display: inline-block;
        }

        nav .navigation-main .floating-menu > ul > li.expanded .open-dropdown .fa:before {
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        nav .navigation-main .close-menu-wrapper {
            height: 50px;
            border-bottom: 1px solid #405a77;
        }

        nav .navigation-main .close-menu {
            cursor: pointer;
            display: block;
            height: 50px;
            width: 50px;
            float: right;
            background-size: auto 50px;
            background-position: 100% center;
            background-repeat: no-repeat;
            color: white;
            text-align: right;
            -moz-transform: translate3d(0, -100%, 0);
            -ms-transform: translate3d(0, -100%, 0);
            -o-transform: translate3d(0, -100%, 0);
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
            -moz-transition: all 0.3s;
            -o-transition: all 0.3s;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
            -moz-transition-delay: 0.2s;
            -o-transition-delay: 0.2s;
            -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
        }

        nav .navigation-main .close-menu .icon {
            font-size: 26px;
            line-height: 50px;
            padding-right: 8px;
        }

        nav .navigation-main .navbar-dropdown .box-1 {
            display: none;
        }

        nav .navigation-main .navbar-dropdown ul {
            margin: 20px 0;
            padding: 0;
        }

        nav .navigation-main .navbar-dropdown .navbar-box ul {
            margin-bottom: 15px;
        }

        nav .navigation-main .navbar-dropdown .navbar-box ul > li > a {
            border-color: $theme2;
            font-size: 14px;
            padding-top: 8px;
            padding-bottom: 8px;
        }

        nav .navigation-main .navbar-dropdown .navbar-box ul > li.label {
            text-transform: uppercase;
            margin-bottom: 10px;
            display: inline-block;
            color: white;
        }
    }
    nav .open-login,
    nav .open-cart,
    nav .open-search {
        border-left: 1px solid rgba(255, 255, 255, 0.2);
    }

    nav .open-login.open .icon:before,
    nav .open-cart.open .icon:before,
    nav .open-search.open .icon:before {
        content: "\e870";
    }

    nav .open-cart {
        position: relative;
    }

    nav .open-cart span {
        background-color: #3a3d45;
        color: white;
        position: absolute;
        width: 15px;
        height: 15px;
        line-height: 15px;
        right: 4px;
        top: 5%;
        text-align: center;
        font-size: 10px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

    nav .search-wrapper {
        position: absolute;
        background: white;
        top: 56px;
        right: 0px;
        width: 400px;
        z-index: 9999;
        padding: 0;
        border-left: 1px solid #dededc;
        padding-left: 15px;
    }

    nav .search-wrapper .form-control {
        height: 50px;
        border-color: transparent;
    }

    @media (min-width: 992px) {
        nav .search-wrapper .form-control {
            padding-left: 0;
            padding-right: 0;
        }
    }
    nav .search-wrapper .form-control:focus {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    nav .search-wrapper .btn {
        position: absolute;
        right: 5px;
        top: 9px;
    }

    @media (min-width: 992px) {
        nav .search-wrapper .btn {
            right: 0;
            top: 10px;
        }
    }
    @media (max-width: 991px) {
        nav .search-wrapper {
            left: 0;
            right: 0;
        }
    }
    nav .login-wrapper {
        width: 100%;
        background-color: white;
        border: 1px solid #e0e0e0;
        border-top: 0;
        position: absolute;
        display: inline-block;
        text-align: left;
        padding: 20px;
        top: 56px;
        left: auto;
        right: 0;
        z-index: 999;
    }

    @media (min-width: 768px) {
        nav .login-wrapper {
            max-width: 300px;
        }
    }
    nav .cart-wrapper {
        position: absolute;
        width: 100%;
        top: 56px;
        right: 0;
        padding: 7.5px;
        max-width: 500px;
        border: 1px solid #e0e0e0;
        border-top: 0;
        overflow: hidden;
        background-color: white;
    }

    @media (min-width: 992px) {
        nav .cart-wrapper {
            right: 15px;
        }
    }
    nav .cart-wrapper .checkout {
        padding: 0 15px;
        opacity: 0;
        -moz-transition-delay: 0.1s;
        -o-transition-delay: 0.1s;
        -webkit-transition-delay: 0.1s;
        transition-delay: 0.1s;
        -moz-transition: all 0.2s;
        -o-transition: all 0.2s;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
        -moz-transform: translate3d(100%, 0, 0);
        -ms-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0);
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    nav .cart-wrapper .checkout hr {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    nav .cart-wrapper .checkout .cart-block {
        padding: 10px;
        margin-bottom: 10px;
    }

    nav .cart-wrapper .checkout .cart-block > div.quantity {
        padding: 5px 0;
        text-align: left;
    }

    nav .cart-wrapper .checkout .cart-block > div.quantity .form-control {
        width: 60px;
        height: inherit;
    }

    nav .cart-wrapper .checkout .cart-block > div.price {
        padding-right: 10px;
    }

    nav .cart-wrapper .checkout .cart-block .title {
        padding: 15px 0;
    }

    @media (min-width: 992px) {
        nav .cart-wrapper .checkout .cart-block .title {
            padding: 15px;
        }
    }
    nav .cart-wrapper .checkout .cart-block.cart-block-footer {
        padding: 5px 0;
        margin: 0;
        margin-bottom: 3px;
        width: 100%;
        background-color: transparent;
    }

    nav .cart-wrapper .checkout .cart-block.cart-block-footer .title {
        padding: 0;
    }

    nav .cart-wrapper .checkout .cart-block.cart-block-footer > div {
        float: left;
        padding: 0;
    }

    nav .cart-wrapper .checkout .cart-block .icon-delete {
        padding: 2px;
    }

    nav .cart-wrapper .checkout .cart-block-buttons {
        margin: 20px 0;
    }

    nav .cart-wrapper.open .checkout {
        opacity: 1;
        -moz-transition-delay: 0.3s;
        -o-transition-delay: 0.3s;
        -webkit-transition-delay: 0.3s;
        transition-delay: 0.3s;
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    nav .search-wrapper,
    nav .login-wrapper,
    nav .cart-wrapper {
        -moz-transition-delay: 0.1s;
        -o-transition-delay: 0.1s;
        -webkit-transition-delay: 0.1s;
        transition-delay: 0.1s;
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        -webkit-transform: scale(1, 0);
        transform: scale(1, 0);
        -moz-transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
        -o-transform-origin: 50% 0;
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    nav .search-wrapper.open,
    nav .login-wrapper.open,
    nav .cart-wrapper.open {
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    @media (max-width: 991px) {
        nav .search-wrapper,
        nav .login-wrapper,
        nav .cart-wrapper {
            top: 55px;
            border-top: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
        }
    }

    @font-face {
        font-family: "LinearIcons";
        src: url("./fonts/linearIcons.woff2?w118d") format("woff2");
        font-weight: normal;
        font-style: normal;
    }
    .icon {
        font-family: "LinearIcons";
        font-style: normal;
        font-variant-ligatures: normal;
        font-variant-caps: normal;
        font-variant-numeric: normal;
        font-weight: normal;
        font-stretch: normal;
        text-transform: none;
        speak: none;
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-home:before {
        content: "\e800";
    }

    .icon-apartment:before {
        content: "\e801";
    }

    .icon-pencil:before {
        content: "\e802";
    }

    .icon-magic-wand:before {
        content: "\e803";
    }

    .icon-drop:before {
        content: "\e804";
    }

    .icon-lighter:before {
        content: "\e805";
    }

    .icon-poop:before {
        content: "\e806";
    }

    .icon-sun:before {
        content: "\e807";
    }

    .icon-moon:before {
        content: "\e808";
    }

    .icon-cloud:before {
        content: "\e809";
    }

    .icon-cloud-upload:before {
        content: "\e80a";
    }

    .icon-cloud-download:before {
        content: "\e80b";
    }

    .icon-cloud-sync:before {
        content: "\e80c";
    }

    .icon-cloud-check:before {
        content: "\e80d";
    }

    .icon-database:before {
        content: "\e80e";
    }

    .icon-lock:before {
        content: "\e80f";
    }

    .icon-cog:before {
        content: "\e810";
    }

    .icon-trash:before {
        content: "\e811";
    }

    .icon-dice:before {
        content: "\e812";
    }

    .icon-heart:before {
        content: "\e813";
    }

    .icon-star:before {
        content: "\e814";
    }

    .icon-star-half:before {
        content: "\e815";
    }

    .icon-star-empty:before {
        content: "\e816";
    }

    .icon-flag:before {
        content: "\e817";
    }

    .icon-envelope:before {
        content: "\e818";
    }

    .icon-paperclip:before {
        content: "\e819";
    }

    .icon-inbox:before {
        content: "\e81a";
    }

    .icon-eye:before {
        content: "\e81b";
    }

    .icon-printer:before {
        content: "\e81c";
    }

    .icon-file-empty:before {
        content: "\e81d";
    }

    .icon-file-add:before {
        content: "\e81e";
    }

    .icon-enter:before {
        content: "\e81f";
    }

    .icon-exit:before {
        content: "\e820";
    }

    .icon-graduation-hat:before {
        content: "\e821";
    }

    .icon-license:before {
        content: "\e822";
    }

    .icon-music-note:before {
        content: "\e823";
    }

    .icon-film-play:before {
        content: "\e824";
    }

    .icon-camera-video:before {
        content: "\e825";
    }

    .icon-camera:before {
        content: "\e826";
    }

    .icon-picture:before {
        content: "\e827";
    }

    .icon-book:before {
        content: "\e828";
    }

    .icon-bookmark:before {
        content: "\e829";
    }

    .icon-user:before {
        content: "\e82a";
    }

    .icon-users:before {
        content: "\e82b";
    }

    .icon-shirt:before {
        content: "\e82c";
    }

    .icon-store:before {
        content: "\e82d";
    }

    .icon-cart:before {
        content: "\e82e";
    }

    .icon-tag:before {
        content: "\e82f";
    }

    .icon-phone-handset:before {
        content: "\e830";
    }

    .icon-phone:before {
        content: "\e831";
    }

    .icon-pushpin:before {
        content: "\e832";
    }

    .icon-map-marker:before {
        content: "\e833";
    }

    .icon-map:before {
        content: "\e834";
    }

    .icon-location:before {
        content: "\e835";
    }

    .icon-calendar-full:before {
        content: "\e836";
    }

    .icon-keyboard:before {
        content: "\e837";
    }

    .icon-spell-check:before {
        content: "\e838";
    }

    .icon-screen:before {
        content: "\e839";
    }

    .icon-smartphone:before {
        content: "\e83a";
    }

    .icon-tablet:before {
        content: "\e83b";
    }

    .icon-laptop:before {
        content: "\e83c";
    }

    .icon-laptop-phone:before {
        content: "\e83d";
    }

    .icon-power-switch:before {
        content: "\e83e";
    }

    .icon-bubble:before {
        content: "\e83f";
    }

    .icon-heart-pulse:before {
        content: "\e840";
    }

    .icon-construction:before {
        content: "\e841";
    }

    .icon-pie-chart:before {
        content: "\e842";
    }

    .icon-chart-bars:before {
        content: "\e843";
    }

    .icon-gift:before {
        content: "\e844";
    }

    .icon-diamond:before {
        content: "\e845";
    }

    .icon-linearicons:before {
        content: "\e846";
    }

    .icon-dinner:before {
        content: "\e847";
    }

    .icon-coffee-cup:before {
        content: "\e848";
    }

    .icon-leaf:before {
        content: "\e849";
    }

    .icon-paw:before {
        content: "\e84a";
    }

    .icon-rocket:before {
        content: "\e84b";
    }

    .icon-briefcase:before {
        content: "\e84c";
    }

    .icon-bus:before {
        content: "\e84d";
    }

    .icon-car:before {
        content: "\e84e";
    }

    .icon-train:before {
        content: "\e84f";
    }

    .icon-bicycle:before {
        content: "\e850";
    }

    .icon-wheelchair:before {
        content: "\e851";
    }

    .icon-select:before {
        content: "\e852";
    }

    .icon-earth:before {
        content: "\e853";
    }

    .icon-smile:before {
        content: "\e854";
    }

    .icon-sad:before {
        content: "\e855";
    }

    .icon-neutral:before {
        content: "\e856";
    }

    .icon-mustache:before {
        content: "\e857";
    }

    .icon-alarm:before {
        content: "\e858";
    }

    .icon-bullhorn:before {
        content: "\e859";
    }

    .icon-volume-high:before {
        content: "\e85a";
    }

    .icon-volume-medium:before {
        content: "\e85b";
    }

    .icon-volume-low:before {
        content: "\e85c";
    }

    .icon-volume:before {
        content: "\e85d";
    }

    .icon-mic:before {
        content: "\e85e";
    }

    .icon-hourglass:before {
        content: "\e85f";
    }

    .icon-undo:before {
        content: "\e860";
    }

    .icon-redo:before {
        content: "\e861";
    }

    .icon-sync:before {
        content: "\e862";
    }

    .icon-history:before {
        content: "\e863";
    }

    .icon-clock:before {
        content: "\e864";
    }

    .icon-download:before {
        content: "\e865";
    }

    .icon-upload:before {
        content: "\e866";
    }

    .icon-enter-down:before {
        content: "\e867";
    }

    .icon-exit-up:before {
        content: "\e868";
    }

    .icon-bug:before {
        content: "\e869";
    }

    .icon-code:before {
        content: "\e86a";
    }

    .icon-link:before {
        content: "\e86b";
    }

    .icon-unlink:before {
        content: "\e86c";
    }

    .icon-thumbs-up:before {
        content: "\e86d";
    }

    .icon-thumbs-down:before {
        content: "\e86e";
    }

    .icon-magnifier:before {
        content: "\e86f";
    }

    .icon-cross:before {
        content: "\e870";
    }

    .icon-menu:before {
        content: "\e871";
    }

    .icon-list:before {
        content: "\e872";
    }

    .icon-chevron-up:before {
        content: "\e873";
    }

    .icon-chevron-down:before {
        content: "\e874";
    }

    .icon-chevron-left:before {
        content: "\e875";
    }

    .icon-chevron-right:before {
        content: "\e876";
    }

    .icon-arrow-up:before {
        content: "\e877";
    }

    .icon-arrow-down:before {
        content: "\e878";
    }

    .icon-arrow-left:before {
        content: "\e879";
    }

    .icon-arrow-right:before {
        content: "\e87a";
    }

    .icon-move:before {
        content: "\e87b";
    }

    .icon-warning:before {
        content: "\e87c";
    }

    .icon-question-circle:before {
        content: "\e87d";
    }

    .icon-menu-circle:before {
        content: "\e87e";
    }

    .icon-checkmark-circle:before {
        content: "\e87f";
    }

    .icon-cross-circle:before {
        content: "\e880";
    }

    .icon-plus-circle:before {
        content: "\e881";
    }

    .icon-circle-minus:before {
        content: "\e882";
    }

    .icon-arrow-up-circle:before {
        content: "\e883";
    }

    .icon-arrow-down-circle:before {
        content: "\e884";
    }

    .icon-arrow-left-circle:before {
        content: "\e885";
    }

    .icon-arrow-right-circle:before {
        content: "\e886";
    }

    .icon-chevron-up-circle:before {
        content: "\e887";
    }

    .icon-chevron-down-circle:before {
        content: "\e888";
    }

    .icon-chevron-left-circle:before {
        content: "\e889";
    }

    .icon-chevron-right-circle:before {
        content: "\e88a";
    }

    .icon-crop:before {
        content: "\e88b";
    }

    .icon-frame-expand:before {
        content: "\e88c";
    }

    .icon-frame-contract:before {
        content: "\e88d";
    }

    .icon-layers:before {
        content: "\e88e";
    }

    .icon-funnel:before {
        content: "\e88f";
    }

    .icon-text-format:before {
        content: "\e890";
    }

    .icon-text-format-remove:before {
        content: "\e891";
    }

    .icon-text-size:before {
        content: "\e892";
    }

    .icon-bold:before {
        content: "\e893";
    }

    .icon-italic:before {
        content: "\e894";
    }

    .icon-underline:before {
        content: "\e895";
    }

    .icon-strikethrough:before {
        content: "\e896";
    }

    .icon-highlight:before {
        content: "\e897";
    }

    .icon-text-align-left:before {
        content: "\e898";
    }

    .icon-text-align-center:before {
        content: "\e899";
    }

    .icon-text-align-right:before {
        content: "\e89a";
    }

    .icon-text-align-justify:before {
        content: "\e89b";
    }

    .icon-line-spacing:before {
        content: "\e89c";
    }

    .icon-indent-increase:before {
        content: "\e89d";
    }

    .icon-indent-decrease:before {
        content: "\e89e";
    }

    .icon-pilcrow:before {
        content: "\e89f";
    }

    .icon-direction-ltr:before {
        content: "\e8a0";
    }

    .icon-direction-rtl:before {
        content: "\e8a1";
    }

    .icon-page-break:before {
        content: "\e8a2";
    }

    .icon-sort-alpha-asc:before {
        content: "\e8a3";
    }

    .icon-sort-amount-asc:before {
        content: "\e8a4";
    }

    .icon-hand:before {
        content: "\e8a5";
    }

    .icon-pointer-up:before {
        content: "\e8a6";
    }

    .icon-pointer-right:before {
        content: "\e8a7";
    }

    .icon-pointer-down:before {
        content: "\e8a8";
    }

    .icon-pointer-left:before {
        content: "\e8a9";
    }
</style>
